<template>
    <div class="chartdiv"></div>
</template>

<script>
    export default {
        name: "myChart",
        props:{
            option:{ //接收整个option配置，因为设置项太多，暂不考虑默认给予配置
                type:Object,
                default:function () {
                }
            },
            chartId:{
                type:String,
                default:function () {
                }
            }
        },
        data(){
            return {
                mychart:null
            }
        },
        methods:{
            resize(){
                this.mychart.resize();
            }
        },
        watch:{
            'option':{
                handler(){
                    this.mychart = this.$echarts.init(document.getElementById(this.chartId));
                    this.mychart.setOption(this.option);
                    //on(window, 'resize', this.resize)
                    window.addEventListener('resize', this.resize, false)

                },
                deep:true,
                // immediate:true
            },
        },
        mounted(){
            this.$nextTick(()=>{
                this.mychart = this.$echarts.init(document.getElementById(this.chartId));
                this.mychart.setOption(this.option);
                //on(window, 'resize', this.resize)
                window.addEventListener('resize', this.resize, false)
            })
        },
        activated(){
            this.resize();
            window.addEventListener('resize', this.resize, false)
        },
        deactivated(){
            window.removeEventListener('resize', this.resize, false)
        }
    }
</script>

<style scoped lang="less">
.chartdiv{
    width: 100%;
    height: 100%;
}
</style>